<div ng-controller="ConfigurationController" class="configuration-tab">
  <tabset class="tabs-top">

    <tab active="generalConfigActive" select="onTabSelect()">
      <tab-heading>
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, '')"></i>
        <span translate="home.detailPane.configurationTab.general">General</span>
      </tab-heading>

      <div ng-if="generalConfigActive" class="tabs-content">
        <ng-include src="'app/home/detail/configuration/general.tpl.html'"></ng-include>
      </div>
    </tab>

    <tab ng-repeat="groupNameToLabelMap in configGroupTabs"
         disable="!isGroupVisible(detailPaneConfig, detailPaneConfigDefn.configDefinitions, groupNameToLabelMap.name)"
         active="groupNameToLabelMap.active"
         select="onTabSelect()">
      <tab-heading>
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, groupNameToLabelMap.name)"></i>
        <span>{{groupNameToLabelMap.label}}</span>
      </tab-heading>

      <div class="tabs-content" ng-if="groupNameToLabelMap.active">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="{{detailPaneConfig.instanceName || 'pipeline'}}">
          <div class="form-group "
               ng-class="{'has-error': getConfigurationIssueMessage(detailPaneConfig, configDefinition)}"
               ng-repeat="configDefinition in detailPaneConfigDefn.configDefinitions | filter: {group: groupNameToLabelMap.name} | orderBy: 'displayPosition'"
               ng-if="(!configDefinition.dependsOn || verifyDependsOnMap(detailPaneConfig, configDefinition)) && configDefinition.group === groupNameToLabelMap.name"
               ng-init="configIndex = getConfigIndex(detailPaneConfig, configDefinition)">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                    src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>
        </form>
      </div>
    </tab>

    <tab ng-if="errorStageConfig"
         select="onTabSelect()"
         active="errorStageConfigActive">
      <tab-heading ng-controller="ErrorConfigurationController">
        <i class="fa fa-exclamation-triangle icon-danger"
           ng-show="showConfigurationWarning(detailPaneConfig, undefined, true)"></i>
        {{'home.detailPane.badRecords' | translate}} - {{errorStageConfigDefn.label}}
      </tab-heading>
      <div class="tabs-content" ng-if="errorStageConfigActive" ng-controller="ErrorConfigurationController">
        <form class="form-horizontal" role="form"
              ng-class="{'form-group-sm': ($storage.displayDensity === pipelineConstant.DENSITY_COZY || $storage.displayDensity === pipelineConstant.DENSITY_COMPACT)}"
              name="badRecordsForm">
          <div class="form-group"
               ng-class="{'has-error': getConfigurationIssueMessage(detailPaneConfig, configDefinition)}"
               ng-repeat="configDefinition in errorStageConfigDefn.configDefinitions track by $index | orderBy: 'displayPosition'"
               ng-if="(!configDefinition.dependsOn || verifyDependsOnMap(errorStageConfig, configDefinition))"
               ng-init="configIndex = getConfigIndex(errorStageConfig, configDefinition);">

            <ng-include ng-if="selectedType !== pipelineConstant.LINK"
                        src="'app/home/detail/configuration/groupConfiguration.tpl.html'"></ng-include>
          </div>
        </form>
      </div>
    </tab>

  </tabset>

</div>


<ng-include src="'app/home/detail/configuration/typeTemplate.tpl.html'"></ng-include>
